import "dayjs/locale/zh-cn";
import "./App.css";
import zhCN from "antd/locale/zh_CN";
import { useCallback, useRef, useState } from "react";
import PSelectEvent from "./components/PSelectEvent";
import PSelectorText from "./components/PSelectorText";
import PSelectorSeting from "./components/PSelectorSeting";
import PSelectorAttribute from "./components/PSelectorAttribute";
import PSelectorFangXiangChange from "./components/PSelectorFangXiangChange";
import { App, Tabs, ConfigProvider, type TabsProps, Button, Flex, Form, Row, Col } from "antd";
import { SettingOutlined, CloseCircleOutlined, QuestionCircleOutlined, SwapOutlined } from "@ant-design/icons";
const items: TabsProps["items"] = [
    {
        key: "1",
        label: "元素属性",
        children: <PSelectorAttribute name="target" />,
        forceRender: true,
    },
    {
        key: "2",
        label: "交互操作",
        children: <PSelectEvent />,
        forceRender: true,
    },
];
export default function () {
    const [form] = Form.useForm();
    const [open, setOpen] = useState(false);
    const positionRef = useRef("left");
    const rootContainerRef = useRef<HTMLDivElement>(null);
    const handleOpen = useCallback(() => setOpen(true), []);
    const handleCancel = useCallback(() => setOpen(false), []);

    const handleTopRightOrLeft = () => {
        if (positionRef.current != "left") {
            rootContainerRef.current!.style.left = "20px";
            rootContainerRef.current!.style.right = "auto";
            positionRef.current = "left";
        } else {
            rootContainerRef.current!.style.left = "auto";
            rootContainerRef.current!.style.right = "20px";
            positionRef.current = "right";
        }
    };

    const handleClose = () => {
        rootContainerRef.current!.style.display = "none";
    };

    return (
        <ConfigProvider locale={zhCN}>
            <App>
                <div className="selectorRoot" ref={rootContainerRef}>
                    <Flex
                        gap={10}
                        align="center"
                        style={{
                            borderBottom: "1px solid #ddd",
                            paddingBottom: 5,
                            paddingTop: 10,
                            paddingRight: 10,
                        }}
                    >
                        <Flex align="center">
                            <Button color="default" type="text" onClick={handleTopRightOrLeft}>
                                <SwapOutlined />
                            </Button>
                            <h3 style={{ margin: 0, padding: 0, fontSize: 14 }}>元素选择器</h3>
                        </Flex>
                        <Flex flex={1} justify="flex-end">
                            <Button icon={<QuestionCircleOutlined />} type="link" target="_blank" style={{ padding: 0 }} />
                            <Button onClick={handleClose} color="default" style={{ padding: 0 }} type="text" icon={<CloseCircleOutlined />} />
                        </Flex>
                    </Flex>
                    <Form.Provider
                        onFormFinish={(name, { values, forms }) => {
                            if (name === "settingForm") {
                                const { basicForm } = forms;
                                basicForm.setFieldsValue(values);
                                setOpen(false);
                            }
                        }}
                    >
                        <Form layout="vertical" name="basicForm" form={form} onFinish={(values) => console.log(values, "values")}>
                            <Form.Item name="root" noStyle />

                            <div style={{ padding: 10, maxHeight: "60vh", overflowY: "auto" }}>
                                <Flex gap={10}>
                                    <PSelectorText name="target" />
                                    <Button color="default" variant="filled" icon={<SettingOutlined />} onClick={handleOpen} />
                                </Flex>
                                <PSelectorSeting open={open} onCancel={handleCancel} />
                                <PSelectorFangXiangChange />
                                <Tabs defaultActiveKey="1" centered items={items} />
                            </div>
                            <Row gutter={10} style={{ borderTop: "1px solid #ddd", padding: 10 }}>
                                <Col span={12}>
                                    <Button block>取消</Button>
                                </Col>
                                <Col span={12}>
                                    <Button type="primary" htmlType="submit" block>
                                        确定
                                    </Button>
                                </Col>
                            </Row>
                        </Form>
                    </Form.Provider>
                </div>
            </App>
        </ConfigProvider>
    );
}
